<template>
	<el-popover
		placement="bottom-start"
		:width="step===1?500:650"
		title=""
		trigger="hover"
		v-model:visible="showDingyue"
	>
		<template #reference>
      <div class="shaixuan">
        <img src="@/assets/dingyue.png"  />
        <span>订阅</span>
      </div>
			
		</template>
    <div v-if="step===2">
      <p class="header">投资领域订阅</p>
		<p style="margin-top: 20px; font-size: 12px; color: #8f919c">
			请至少选择三个您感兴趣的投资领域进行订阅，<span>订阅成功</span>后相关领域的投资物料通过“东证繁微”服务号进行推送。
		</p>
		<div class="active">
        <div v-for="(item,index) in activeName" :key="index">
          {{ item.label }}
          <div class="cha">x</div>
        </div>
        <div class="zdy">+ 自定义</div>
    </div>
    <el-tabs v-model="activeTab" class="tabs">
			<el-tab-pane label="商品" name="sp"></el-tab-pane>
			<el-tab-pane label="宏观" name="hg"></el-tab-pane>
			<el-tab-pane label="量化" name="lh"></el-tab-pane>
			<el-tab-pane label="行业研究" name="hyyj"></el-tab-pane>
			<el-tab-pane label="股权投资" name="gqtz"></el-tab-pane>
		</el-tabs>
    <div class="seletsBox">
      <div v-for="(item,index) in list" :key="'item'+index">
        <div class="title">
          <img src="@/assets/login/jxbf.png" >
          {{ item.label }}</div>
        <div class="itemBox">
          <div @click="selectItem(item2)" :class="{item:true,activeItem:item2.status}" v-for="(item2,index2) in item.list" :key="'item2'+index2">
            <div>{{ item2.label }}</div>
          </div>
        </div>
        
      </div>
    </div>
    </div>
    <ServiceFollow v-if="step===1"/>
    <div class="footer">
      <el-button color="#1356FF" type="primary" plain>取消</el-button>
      <el-button color="#1356FF" type="primary" @click="step++">确认</el-button>
    </div>
	</el-popover>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ServiceFollow from './ServiceFollow.vue'

const step = ref(1)
const showDingyue = ref(false)
const activeTab = ref('sp')
const activeName = ref([
  {label:'钢材(螺纹/热轧/线材)',id:1},
  {label:'铁矿石',id:1},
  {label:'焦炭',id:1},
  {label:'动力煤',id:1},
  {label:'原油',id:1},
  {label:'天然气',id:1},
  {label:'液化石油气',id:1},
  {label:'电力',id:1},
  {label:'沥青',id:1},
])
const list = ref([
  {label:'黑色金属',id: 1,list:[{label:'钢材(螺纹/热轧/线材)',id:'1-1',status:true},{label:'钢材',id:'1-2'},{label:'钢材(螺纹/热轧/线材)',id:'1-1'},{label:'钢材',id:'1-2'},{label:'钢材(螺纹/热轧/线材)',id:'1-1'},{label:'钢材',id:'1-2'},{label:'钢材(螺纹/热轧/线材)',id:'1-1'},{label:'钢材',id:'1-2'}]},
  {label:'有色金属',id: 2,list:[{label:'铜',id:'1-1'},{label:'铝',id:'1-2'}]},
  {label:'能源',id: 3,list:[{label:'电力',id:'1-1'},{label:'天然气',id:'1-2'}]},
])

function selectItem(item:any) {
  item.status = !item.status
}
</script>
<style lang="less" scoped>
.shaixuan {
	margin-left: 1.25rem;
	cursor: pointer;
  display: flex;
  align-items: center;
  img {
	width: 20px;
	height: 20px;
        margin-right: 3px;

  }
}
.header {
  color: black;
  font-weight: 600;
}
.active {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid #ccc;
  padding: 10px 0 20px 0;
  >div {
    cursor: pointer;
  padding: 5px 8px;
  background-color: rgba(255, 89, 0,0.5);
  border: 1px dashed rgb(255, 89, 0);
    font-size: 12px;
  display: flex;
  align-items: center;
  color: rgb(255, 89, 0);
  border-radius: 3px;
  .cha {
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    margin-left: 3px;
    &:hover {
    color: white;
    background-color: rgb(255, 89, 0);

    }
  }
  }
  .zdy {
    border: 0;
    background-color: rgba(220, 220, 220, 0.5);
    color: rgb(182, 182, 182);
  }
}
.seletsBox {
  >div {
    margin-bottom: 20px;
    .title{
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 600;
      color: black;
      display: flex;
      align-items: center;
      img {
        margin-right: 10px;
        cursor: pointer;
      }
  }
  .itemBox {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  .item {
    padding: 5px 8px;
    border-radius: 3px;
    background-color: #e3e3e3;
    font-size: 12px;
    cursor: pointer;
  }
  .activeItem {
    background-color: #aeb7ec;
    color: #4856ee;

  }
  }
  }
  
}
.footer {
  display: flex;
  justify-content: end;
}

// tabs样式
:deep(.el-tabs__item) {
	font-size: 14px;
	font-weight: 600;
}
:deep(.el-tabs__item.is-active) {
    color: @color-1356FF !important;
}
:deep(.el-tabs__item:hover) {
    color: @color-1356FF !important;
}
:deep(.el-tabs__item.is-active, .el-tabs__item:hover) {
    color: @color-1356FF !important;
}
:deep(.el-tabs__active-bar) {
    background-color: @color-1356FF !important;
}
</style>
